<template>
	<div ref="chart" class="echart"></div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
	name: 'BaseLineChart',
	components: {},
	// 定义属性
	data() {
		return {
			fontSize: 12,
			padding: false,
			width: '100%'
		}
	},
	props: {
		title: {
			type: String,
			default: '用户设备分布'
		},
		model: {
			type: Object,
			default: () => {}
		}
	},

	// 计算属性，会监听依赖属性值随之变化
	computed: {},
	// 监控data中的数据变化
	watch: {
		model: {
			//深度监听，可监听到对象、数组的变化
			handler(val) {
				this.drawLine(this.model)
			},
			deep: true //true 深度监听
		}
	},
	// 方法集合
	methods: {
		ScreenWidth() {
			if (screen.width <= 1920) {
				this.fontSize = 12
				this.padding = false
			} else {
				this.fontSize = 16
				this.padding = true
			}
		},
		drawLine() {
			//   console.log(option, "option1");
			const chart = this.$refs.chart

			this.width = chart.style.width
			let myChart = this.$echarts.init(chart) //推荐
			let that = this
			let options = {
				title: {
					show: false
					// text: '总人数',
					// subtext: '2000',
					// subtextStyle: {
					// 	color: '#222'
					// }
				},
				tooltip: {
					trigger: 'axis'
				},
			 
				
				grid: {
					 left:'20px',
					 right:'60px',
					   
					containLabel: true

				},

				xAxis: this.model.xAxis,
				yAxis: this.model.yAxis,
				dataZoom: [
					{
						type: 'slider', //详细配置可见echarts官网
						xAxisIndex: [0],
						show: false,

						startValue: 0, // 从头开始。
						// endValue: 5, // 一次性展示五个。
						textStyle: {
							color: 'rgba(0,0,0,0)'
						}
					},
					{
						type: 'inside', //内置滑动，随鼠标滚轮展示

						start: 1 //初始化时，滑动条宽度开始标度<br data-filtered="filtered">                        end: 50  //初始化时，滑动条宽度结束标度
					}
				],
				series: this.model.series
			}

			// 绘制图表
			options && myChart.setOption(options)

			window.addEventListener('resize', () => {
				myChart.resize() //resize 页面大小改变，调整大小
			})
		}
	},
	// 生命周期 - 创建完成（可以访问当前this实例）
	created() {},
	// 生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		// console.log(this.lineData, "lineData");
		this.drawLine()
	},
	beforeCreate() {}, // 生命周期 - 创建之前
	beforeMount() {}, // 生命周期 - 挂载之前
	beforeUpdate() {}, // 生命周期 - 更新之前
	updated() {}, // 生命周期 - 更新之后
	beforeDestroy() {}, // 生命周期 - 销毁之前
	destroyed() {}, // 生命周期 - 销毁完成
	activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style  scoped>
.echart {
  width:100%;
 
}
.font {
	font-size: 0.313vw;
	color: white;
}
</style>